import React, {Component} from 'react';
import {Image, StyleSheet, Text, TextInput, TouchableOpacity, View, Alert} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'
import ModalDropdown from 'react-native-modal-dropdown';
import DatePicker from 'react-native-datepicker'
import utils from './../utils/utils';


export default class RegisterPageOne extends Component {

    constructor(props) {
        super(props);
        this.dataone = {
            userName: '',
            age: '',
            sex: '',
            birthday: '',
            tel: '',
            mail: '',
            addr: '',
            pass: '',
            repass: '',
            role: '',
        };

        this.state = {
            date: "",
            registerButStatus: false,
        };
    }

    registerOne = async () => {
        if (!this.state.registerButStatus) {
            console.log(this.state.registerButStatus)
            await this.setState({registerButStatus: true,})
            setTimeout(async () => {
                await this.setState({registerButStatus: false})
            }, 1500);

            if(this.dataone.userName === ''){
                Alert.alert("警告", "请输入用户名")
            }else if(/.*[\u4e00-\u9fa5]+.*$/.test(this.dataone.userName)){
                Alert.alert("警告", "用户名不能为中文")
            }else if(this.dataone.userName.contains('@')){
                Alert.alert("警告", "用户名不能为邮箱格式")
            }else if(this.dataone.age === ''){
                Alert.alert("警告", "请输入年龄")
            }else if(this.dataone.sex === ''){
                Alert.alert("警告", "请选择性别")
            }else if(this.dataone.birthday === ''){
                Alert.alert("警告", "请输入生日")
            }else if(this.dataone.tel === '' || this.dataone.tel.length !== 11){
                Alert.alert("警告", "请检查手机号")
            }else if(this.dataone.mail === ''){
                Alert.alert("警告", "请输入邮箱");
            }else if(this.dataone.addr === ''){
                Alert.alert("警告", "请输入地址")
            }else if(this.dataone.pass === ''){
                Alert.alert("警告", "请输入密码")
            }else if(this.dataone.repass === '' || this.dataone.pass !== this.dataone.repass){
                Alert.alert("警告", "请检查两次密码是否相同")
            }else if(this.dataone.role === ''){
                Alert.alert("警告", "请选择角色")
            }else{
                let {navigate} = this.props.navigation;
                navigate('RegisterPageTwoNav', {dataone: this.dataone})
            }

        }else {
            Alert.alert("警告", "点击频繁")
        }
    }

    render() {
        const {navigate} = this.props.navigation;
        return (
            <View style={styles.pageView}>
                <View style={styles.lineView}>
                    <View style={styles.lineViewView}>
                        <Image source={require('../../img/header_line13x.png')} style={styles.lineViewImg}/>
                    </View>
                </View>

                <View><Text style={styles.textProfile}>个人基本信息（1/3）</Text></View>

                <KeyboardAwareScrollView showsVerticalScrollIndicator={false}
                                         showsHorizontalScrollIndicator={false}>
                    <View style={styles.infoView}>
                        <TextInput onChangeText={
                            (text) => {
                                this.dataone.userName = text;
                            }
                        }
                                   style={styles.textInputForm} placeholder="用户名"
                                   underlineColorAndroid={'transparent'}></TextInput>
                        <View style={[styles.textInputForm, {justifyContent: 'center'}]}>
                            <View style={styles.sexInputView}>
                                <Text style={styles.sexInputViewText}>年龄</Text>
                                <View style={styles.sexInputViewMDView}>
                                    <ModalDropdown
                                        style={styles.sexInputViewMDViewStyle}
                                        textStyle={styles.sexInputViewMDViewTextStyle}
                                        options={['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50'
                                        ]}
                                        defaultValue="请选择年龄"
                                        onSelect={(index, value) => {
                                            this.dataone.age = value;
                                        }}
                                    >
                                    </ModalDropdown>
                                    <View style={styles.sexInputViewMDViewImgView}>
                                        <Image style={styles.sexInputViewMDViewImgStyle}
                                               source={require('../../img/rightpoint.png')}/>
                                    </View>
                                </View>

                            </View>
                        </View>

                        <View style={[styles.textInputForm, {justifyContent: 'center'}]}>
                            <View style={styles.sexInputView}>
                                <Text style={styles.sexInputViewText}>性别</Text>
                                <View style={styles.sexInputViewMDView}>
                                    <ModalDropdown
                                        style={styles.sexInputViewMDViewStyle}
                                        textStyle={styles.sexInputViewMDViewTextStyle}
                                        dropdownStyle={styles.dropdownStyle}
                                        options={['男', '女']}
                                        defaultValue="请选择性别"
                                        onSelect={(index, value) => {
                                            this.dataone.sex = value;
                                        }}
                                    >
                                    </ModalDropdown>
                                    <View style={styles.sexInputViewMDViewImgView}>
                                        <Image style={styles.sexInputViewMDViewImgStyle}
                                               source={require('../../img/rightpoint.png')}/>
                                    </View>
                                </View>

                            </View>
                        </View>

                        <View style={[styles.textInputForm, {justifyContent: 'center'}]}>
                            <View style={styles.sexInputView}>
                                <View style={styles.sexInputViewMDViewImgView}>
                                    <Text style={styles.sexInputViewText}>生日</Text>
                                </View>
                                <View style={styles.sexInputViewMDView}>
                                    <DatePicker
                                        style={{width: 200, borderWidth: 0, borderColor: '#FFF'}}
                                        date={this.state.date}
                                        mode="date"
                                        placeholder="请选择生日"
                                        format="YYYY-MM-DD"
                                        minDate="1950-01-01"
                                        maxDate="2020-01-01"
                                        confirmBtnText="确认"
                                        cancelBtnText="取消"
                                        customStyles={{
                                            dateInput: {
                                                marginLeft: utils.autoWidth(100),
                                                borderWidth: 0,
                                            }
                                        }}
                                        showIcon={false}
                                        onDateChange={
                                            (date) => {
                                                this.setState({
                                                    date: date
                                                });
                                                this.dataone.birthday = date;
                                            }}
                                    />
                                    <View style={styles.sexInputViewMDViewImgView}>
                                        <Image style={styles.sexInputViewMDViewImgStyle}
                                               source={require('../../img/rightpoint.png')}/>
                                    </View>
                                </View>

                            </View>
                        </View>
                        <TextInput onChangeText={
                            (text) => {
                                this.dataone.tel = text;
                            }
                        } style={styles.textInputForm} placeholder="手机"
                                   underlineColorAndroid={'transparent'}></TextInput>
                        <TextInput onChangeText={
                            (text) => {
                                this.dataone.mail = text;
                            }
                        } style={styles.textInputForm} placeholder="邮箱"
                                   underlineColorAndroid={'transparent'}></TextInput>
                        <TextInput
                            onChangeText={
                                (text) => {
                                    this.dataone.addr = text;
                                }
                            } style={styles.textInputForm} placeholder="地址"
                            underlineColorAndroid={'transparent'}></TextInput>
                        <TextInput onChangeText={
                            (text) => {
                                this.dataone.pass = text;
                            }
                        } style={styles.textInputForm} placeholder="密码"
                                   underlineColorAndroid={'transparent'} secureTextEntry={true}></TextInput>
                        <TextInput onChangeText={
                            (text) => {
                                this.dataone.repass = text;
                            }
                        } style={styles.textInputForm} placeholder="确认密码" secureTextEntry={true}
                                   underlineColorAndroid={'transparent'}></TextInput>
                        <View
                            style={[styles.textInputForm, {justifyContent: 'center'}, {borderBottomWidth: utils.autoWidth(0.5)}]}>
                            <View style={styles.sexInputView}>
                                <Text style={styles.sexInputViewText}>角色</Text>
                                <View style={styles.sexInputViewMDView}>
                                    <ModalDropdown
                                        style={styles.sexInputViewMDViewStyle}
                                        textStyle={styles.sexInputViewMDViewTextStyle}
                                        dropdownStyle={styles.dropdownStyle}
                                        options={['搭配师', '体验官']}
                                        defaultValue="请选择角色"
                                        onSelect={(index, value) => {
                                            this.dataone.role = value;
                                        }}
                                    >
                                    </ModalDropdown>
                                    <View style={styles.sexInputViewMDViewImgView}>
                                        <Image style={styles.sexInputViewMDViewImgStyle}
                                               source={require('../../img/rightpoint.png')}/>
                                    </View>
                                </View>

                            </View>
                        </View>
                    </View>
                </KeyboardAwareScrollView>

                <TouchableOpacity style={styles.nextTouch}
                                    onPress={this.registerOne}>
                    <View style={styles.nextTouchTextView}><Text style={styles.nextTouchText}>下一步</Text>
                        <Text style={styles.nextTouchText}>NEXT STEP</Text>
                    </View>
                </TouchableOpacity>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    pageView: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },
    lineView: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    lineViewView: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    lineViewImg: {
        width: utils.autoWidth(195),
        height: utils.autoheight(15),
    },
    textProfile: {
        fontSize: utils.setSpText(13),
        color: "#010101",
    },
    infoView: {
        marginTop: utils.autoheight(10.5),
    },
    textInputForm: {
        width: utils.autoWidth(320),
        height: utils.autoheight(44),
        borderColor: '#A0A0A0',
        borderTopWidth: utils.autoWidth(0.5),
        borderRightWidth: utils.autoWidth(0.5),
        borderLeftWidth: utils.autoWidth(0.5),
    },
    nextTouch: {
        width: utils.autoWidth(320),
        height: utils.autoheight(50),
        borderColor: '#010101',
        borderWidth: utils.autoWidth(2),
        alignItems: 'center',
        marginBottom: utils.autoheight(33),
    },
    nextTouchTextView: {
        alignItems: 'center',
    },
    nextTouchText: {
        fontSize: utils.setSpText(17),
        color: '#010101',
    },
    sexInputView: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    sexInputViewText: {
        marginLeft: utils.autoWidth(12)
    },
    sexInputViewMDView: {
        flexDirection: 'row'
    },
    sexInputViewMDViewStyle: {
        width: utils.autoWidth(100),
    },
    sexInputViewMDViewTextStyle: {
        fontSize: utils.setSpText(15),
        color: '#010101',
        alignSelf: 'flex-end',
        marginRight: utils.autoWidth(13),
    },
    dropdownStyle: {
        height: utils.autoheight(76.5)
    },
    sexInputViewMDViewImgView: {
        justifyContent: 'center',
    },
    sexInputViewMDViewImgStyle: {
        width: utils.autoWidth(8),
        height: utils.autoheight(13),
        marginRight: utils.autoWidth(11),
    }
})